<template>
  <view class="order">
    <view class="address" v-if="address.name" @click="toAddressList">
      <view class="item">
        <view class="list">
          <view class="addresslist">
            <view>
              <view>{{address.name}}</view>
              <view class="moren">默认</view>
            </view>
            <view class="info">
              <view>{{address.mobile}}</view>
              <view>{{address.address+address.address_detail}}</view>
            </view>
            <view></view>
          </view>
        </view>
      </view>
    </view>
    <view class="seladdress" v-else @click="toAdd">请选择默认地址</view>

    <view class="orderbox">
      <view class="item">
        <view>商品合计</view>
        <view>¥{{allprice}}</view>
      </view>
      <view class="item">
        <view>运费</view>
        <view>免运费</view>
      </view>
      <view class="item">
        <view>优惠券</view>
        <view>暂无</view>
      </view>
    </view>

    <view class="cartlist">
      <view class="item" v-for="(item, index) in listData" :key="index">
        <view class="con">
          <view class="left">
            <view class="img">
              <image :src="item.list_pic_url" alt="">
            </view>
            <view class="info">
              <view>{{item.goods_name}}</view>
              <view>¥{{price}}</view>
            </view>
          </view>
          <view class="right">
            <view class="num">x{{item.number}}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom">
      <view>实付：¥ {{allprice}}</view>
      <view class="pay" @click="pay">支付</view>
    </view>
  </view>
</template>

<script>
	export default {
	  data () {
	    return {
	      address: {},
	      price: '',
	      allprice: '',
	      openId: '',
	      addressId: '',
	      listData: []
	    }
	  },
	  onShow () {	
	    if (uni.getStorageSync('addressId')) {
	      this.addressId = uni.getStorageSync('addressId')
	    }   
			this.openId = uni.getStorageSync('openId') || ''
			this.getDetail()
	  },
	  methods: {
	    toAddressList () {
	      wx.navigateTo({
	        url: '/pages/addressSelect/addressSelect'
	      })
	    },
	    toAdd () {
	      wx.navigateTo({
	        url: '/pages/addaddress/addaddress'
	      })
	    },
	    async getDetail () {		
	      const data = await this.$request({
					url:'/order/detailAction',
					data: {
						openId: this.openId,
						addressId: this.addressId
					}
				})
	      if (data) {
	        this.price = data.data.price
	        this.listData = data.data.goodsList
	        this.address = data.data.address
	      }
	      this.listData.map((item) => {
					this.allprice = 0
	        this.allprice += this.price * item.number
	      })
	    },
	    pay () {
	      wx.showToast({
	        title: '支付功能暂未开发',
	        icon: 'none',
	        duration: 1500,
	        mask: false,
	        success: res => {}
	      })
	    }
	  }
	}
</script>

<style lang="scss">
	.order {
	  overflow-x: hidden;
	  .seladdress {
	    width: 100%;
	    min-height: 166rpx;
	    background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png') 0 0 repeat-x #fff;
	    background-size: 62rpx 10rpx;
	    margin-bottom: 20rpx;
	    padding-top: 10rpx;
	    text-align: center;
	    line-height: 166rpx;
	  }
	  .address {
	    background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png') 0 0 repeat-x #fff;
	    padding: 50rpx 0 30rpx 0;
	    margin-bottom: 20rpx;
	    .item {
	      padding: 0 20rpx;
	      .addresslist {
	        width: 100%;
	        position: relative;
	        transition: all 300ms ease;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        view:nth-child(1){
	          width: 100rpx;
	          text-align: center;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: nowrap;
	          .moren {
	            width: 75rpx;
	            height: 30rpx;
	            border: 1rpx solid #b4282d;
	            text-align: center;
	            line-height: 30rpx;
	            color: #b4282d;
	            margin: 10rpx auto 0 auto;
	          }
	        }
	        .info {
	          padding: 0 20rpx;
	          flex: 1; // p:nth-child(1) {}
	          view:nth-child(2) {
	            margin-top: 5rpx;
	            color: #666;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-line-clamp: 2;
	            -webkit-box-orient: vertical;
	          }
	        }
	        view:nth-child(3) {
	          width: 50rpx;
	          height: 50rpx;
	          margin: 0 20rpx;
	          background: url('http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-right-596d39df1e.png') no-repeat;
	          background-size: 100% 100%;
	        }
	      }
	    }
	  }
	  .orderbox {
	    padding: 0 30rpx;
	    background: #ffffff;
	    .item {
	      padding: 30rpx 0;
	      display: flex;
	      justify-content: space-between;
	      border-bottom: 1rpx solid #d9d9d9;
	    }
	    .item:last-child{
	      border: none;
	    }
	  }
	  .cartlist {
	    background: #fff;
	    margin-bottom: 110rpx;
	    margin-top: 20rpx;
	    .item {
	      padding: 20rpx 0;
	      border-bottom: 1rpx solid #f4f4f4; // height: 166rpx;
	      position: relative;
	      .con {
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        transition: all 300ms ease;
	        .left {
	          display: flex;
	          align-items: center;
	          width: 80%;
	          .img {
	            height: 125rpx;
	            width: 125rpx;
	            display: block;
	            background: #f4f4f4;
	            margin-left: 20rpx;
	            image {
	              width: 100%;
	              height: 100%;
	            }
	          }
	          .info {
	            width: 50%;
	            padding: 20rpx;
	            view {
	              line-height: 40rpx;
	            }
	          }
	        }
	        .right {
	          padding-right: 50rpx;
	        }
	      }
	    }
	  }
	  .bottom {
	    position: fixed;
	    bottom: 0;
	    height: 100rpx;
	    width: 100%;
	    display: flex;
	    background: #fff;
	    font-size: 32repx;
	    view:nth-child(1) {
	      flex: 1;
	      line-height: 100rpx;
	      padding-left: 20rpx
	    }
	    view:nth-child(2) {
	      width: 200rpx;
	      height: 100rpx;
	      text-align: center;
	      line-height: 100rpx;
	      font-size: 29rpx;
	      background: #b4282d;
	      color: #fff;
	    }
	  }
	}
</style>
